<template>
  <div class="scrollBox">
    <div>
      <seller-header :seller="seller"></seller-header>
      <van-tabs v-model="active" sticky animated color="#fffa41">
        <van-tab title="菜单">
          <order></order>
        </van-tab>
        <van-tab title="评价">
          <comment></comment>
        </van-tab>
        <van-tab title="商家">
          <seller :seller="seller"></seller>
        </van-tab>
      </van-tabs>
    </div>
    <cart v-show="active == 0" :seller="seller"></cart>
  </div>
</template>
<script>
import { getStoreById } from '../../api/detail'
import sellerHeader from './seller-header'
import order from './order'
import BScroll from 'better-scroll'
import cart from './cart'
import comment from '../comment'
import seller from '../seller'
export default {
  data () {
    return {
      seller: {},
      active: 0,
      scrollBox: null
    }
  },
  components: {
    sellerHeader,
    order,
    cart,
    comment,
    seller
  },
  created () {
    this.getStoreMsg()
  },
  mounted () {
    this.scrollBox = new BScroll('.scrollBox', {
      bounce: false,
      click: true
    })
  },
  methods: {
    async getStoreMsg () {
      const res = await getStoreById({
        id: this.$route.params.id
      })
      this.seller = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.scrollBox {
  height: 100vh;
}
</style>
